<template>
  <div class="meetinglist">
    <el-tabs v-model="activeName">
      <el-tab-pane
        label="正在进行"
        name="now"
      >
        <div v-loading="loading.now">
          <div
            class="no-data"
            v-if="tip.now"
          >
            <img :src="noData" />
          </div>
          <meeting-card-list
            v-else
            type="now"
            :meetingListData="meetinglist.now"
            @refresh="handleConferencesList"
            @page-change="handlePageChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="暂未开始"
        name="ready"
      >
        <div v-loading="loading.ready">
          <div
            class="no-data"
            v-if="tip.ready"
          >
            <img :src="noData" />
          </div>
          <meeting-card-list
            v-else
            type="ready"
            :meetingListData="meetinglist.ready"
            @refresh="handleConferencesList"
            @page-change="handlePageChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="历史会议"
        name="history"
      >
        <div v-loading="loading.history">
          <div
            class="no-data"
            v-if="tip.history"
          >
            <img :src="noData" />
          </div>
          <meeting-card-list
            v-else
            type="history"
            :meetingListData="meetinglist.history"
            @refresh="handleConferencesList"
            @page-change="handlePageChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button
      class="refresh"
      type="text"
      icon="el-icon-refresh"
      @click="handleRefreshClick"
    >
      刷新
    </el-button>
  </div>
</template>

<script>
import { conferencesList } from '@/api/conferences.js'
import MeetingCardList from './MeetingCardList'
export default {
  name: 'MeetingList',
  components: {
    MeetingCardList
  },
  data () {
    return {
      noData: '/images/no_data.png',
      activeName: 'now',
      statusMap: {
        now: 2,
        ready: 1,
        history: 5
      },
      pageSize: 9,
      loading: {
        now: false,
        ready: false,
        history: false
      },
      label: {
        now: 1,
        ready: 2,
        history: 3
      },
      tip: {
        now: true,
        ready: true,
        history: true
      },
      currentPage: {
        now: 1,
        ready: 1,
        history: 1
      },
      meetinglist: {
        now: {},
        ready: {},
        history: {}
      }
    }
  },
  created () {
    this.activeName = this.$route.query.activeName || 'now'
  },
  mounted () {
    this.handleConferencesList('now', 1)
    this.handleConferencesList('ready', 1)
    this.handleConferencesList('history', 1)
  },
  methods: {
    // 刷新会议列表
    handleRefreshClick () {
      this.handleConferencesList(this.activeName, this.currentPage[this.activeName])
    },
    handlePageChange (status, pageNum) {
      console.log(status, pageNum)
      this.currentPage[status] = pageNum
      this.handleConferencesList(status)
    },
    async handleConferencesList (status) {
      this.loading[status] = true
      try {
        const { data } = await conferencesList(
          this.statusMap[status],
          this.currentPage[status],
          this.pageSize
        )
        this.loading[status] = false
        this.tip[status] = false
        this.meetinglist[status] = data
      } catch (err) {
        this.loading[status] = false
        if (err.code === 5005) {
          this.tip[status] = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.meetinglist {
  position: relative;
  margin-bottom: 20px;
  .refresh {
    position: absolute;
    top: 5px;
    right: 20px;
  }
}

.no-data {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 174px;
    height: 174px;
  }
}
</style>
